<template>
    <div class="goods-list">
        <!-- 遍历goodsList数组，生成商品列表 -->
        <div class="goods-item" v-for="item in goodsList" :key="item.id">
            <!-- 使用router-link组件，点击跳转到商品详情页 -->
            <router-link  :to="{ name: 'goodsDetail', params: { id: item.id } }">
                <!-- 使用van-image组件，展示商品图片 -->
                <van-image
                    width="150"
                    height="150"
                    :src="item.picture"
                />
                <!-- 展示商品名称和规格 -->
                <h1 class="title">{{ item.name }}<span class="small">{{ item.spec }}</span></h1>
                <!-- 展示商品价格和库存 -->
                <p class="info">
                    <span class="price">¥{{ item.price }}</span>
                    <span class="sell">剩余 {{ item.stock }} 件</span>
                </p>
            </router-link>
        </div>
        <!-- 如果商品列表不为空，则展示加载更多按钮 -->
        <van-button
            class="more" :disabled="is_last"
            v-if="goodsList.length !== 0"
            size="large"
            type="primary"
            plain hairline @click="getMore">加载更多
        </van-button>
    </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import { getGoodsList } from '../api'
import { showToast } from 'vant'

// 定义商品列表和是否到达底部两个响应式变量
const goodsList = ref([])
const is_last = ref(false)

// 定义最后一个商品的id
let last_id = '0'

// 定义props，接收category_id参数
const props = defineProps({
    category_id: String
})

// 组件挂载时，加载商品列表
onMounted(() => {
    loadGoodList()
})

// 加载商品列表的函数
const loadGoodList = async () => {
    // 定义请求参数
    let params = {
        last_id,
        category_id: props.category_id,
        pagesize: 4
    }
    // 发送请求，获取商品列表
    const data = await getGoodsList(params)
    // 如果返回的商品列表不为空，则将商品列表添加到goodsList中，并更新last_id
    if (data.length > 0) {
        goodsList.value = goodsList.value.concat(data)
        last_id = data[data.length - 1].id
    // 如果返回的商品列表为空，且goodsList中已有商品，则提示已经到达底部，并设置is_last为true
    } else if (goodsList.value.length > 0) {
        showToast({
            message: '已经到达底部',
            type: 'fail'
        })
        is_last.value = true
    // 如果返回的商品列表为空，且goodsList中无商品，则提示列表为空
    } else {
        showToast({
            message: '列表为空',
            type: 'fail'
        })
    }
}
// 点击加载更多按钮时，调用loadGoodList函数
const getMore = () => {
    loadGoodList()
}
</script>

<style lang="less" scoped>
.goods-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    clear: both;
    .goods-item {
        width: calc(calc(100% / 2) - 12px);
        margin: 10px 10px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 10px;
        border: 1px solid #efeff4;
        padding: 10px 0;
        clear: both;
        .title {
            text-align: left;
            font-size: 14px; 
            color: #333;
            margin: 10px 0 0;
            padding: 0 5px;
            .small {
                font-size: 12px;
                padding-left: 2px;
                color: #999;
            }
        }
        .info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0;
            padding: 0 5px;
            .price {
                color: red;
                font-weight: bold;
                font-size: 16px;
            }
            .sell {
                font-size: 13px;
                color: #999;
            }
        }
    }
    .more {
        margin: 40px 20px 40px 10px;
        font-size: 14px;
    }
}
</style>
